<template>
    <van-popup
        v-model="isShow"
        position="bottom"
        :close-on-click-overlay="false"
        :lazy-render="false"
        :lock-scroll="true"
        :overlay="true"
    >
        <div class="spec_body">
            <div class="spec_top">
                <img :src="selectedImg" alt />
                <div class="text">
                    <div class="current">{{ selectedPrice.price | moneyFmt }}</div>
                    <div class="stock">库存{{ selectedStock }}件</div>
                    <div class="choice">{{ specMsg }}</div>
                </div>
                <svg aria-hidden="true" class="close" @click.stop="close">
                    <use xlink:href="#icon-close" />
                </svg>
            </div>
            <div class="line1"></div>
            <mini-spec
                :proContent="proContent"
                ref="spec"
                @getChoose="getShowMsg"
                @findSku="findSku"
            >
                <div class="spec_num">
                    <span>数量</span>
                    <div class="control">
                        <num-control
                            :num="Number(buyNum)"
                            :min="Number(chooseSku.min || proContent.sku[0].min)"
                            :isTuangou="proContent.tuangou"
                            :isCart="false"
                            @changeNumber="changeNumber"
                        />
                        <p
                            v-if="proContent.tuangou"
                        >此商品为团购商品，{{ chooseSku.min || proContent.sku[0].min }}件起购</p>
                    </div>
                </div>
            </mini-spec>
            <div class="line1"></div>
            <div class="spec_bottom" v-if="operation !== 'select'">
                <div class="confirm" @click="chooseDone('select')">选好了</div>
            </div>
            <div class="spec_bottom" v-if="operation === 'select'">
                <div class="cart" @click="chooseDone('add')">加入购物车</div>
                <div class="buy" @click="chooseDone('buy')">立即购买</div>
            </div>
        </div>
    </van-popup>
</template>

<script>
    import NumControl from "../common/num-control";
    import MiniSpec from "./mini-spec";

    export default {
        name: "product-spec",
        data() {
            return {
                isShow: false, //组件是否展示
                opera: "", // 选择的功能按钮（选好了，加入购物车，立即购买）
                chooseSku: "",
                specMsg: "", //提示信息,
                buyNum: 1
            };
        },
        props: {
            proContent: {
                type: Object
            },
            operation: {
                type: String
            }
        },
        created() {
            console.log("proContent", this.proContent);
            this.buyNum = this.proContent.sku[0].min;
        },
        methods: {
            show() {
                //组件显示
                if (this.selectedStock == 0) {
                    this.$toast("该商品已售罄");
                    this.isShow = false;
                } else {
                    this.isShow = true;
                    this.$refs.spec.refresh();
                }
            },
            close() {
                if (this.chooseSku !== "" && this.opera !== "") {
                    this.$emit("chooseDone", this.chooseSku, this.opera);
                }
                this.$emit("showSpecMsg", this.specMsg);
                this.opera = "";
                this.isShow = false;
            },
            changeNumber(num) {
                this.buyNum = num;
                if (this.buyNum <= 1) {
                    this.buyNum = 1;
                }
            },
            //获取显示所选情况
            getShowMsg(selectArr) {
                let selectVal = Object.values(selectArr);
                let msg = "";
                let emptyArr = [];
                if (selectVal.includes("")) {
                    for (let k in selectArr) {
                        if (selectArr[k] === "") {
                            emptyArr.push(k);
                        }
                    }
                    msg = "请选择：" + emptyArr.join(",");
                    this.chooseSku = "";
                } else {
                    msg = "已选择：" + selectVal.join(",");
                }
                this.specMsg = msg;
                this.$emit("showSpecMsg", this.specMsg);
            },
            findSku(buyid) {
                this.proContent.sku.filter(item => {
                    if (item.buyid === buyid) {
                        this.chooseSku = item;
                        this.buyNum = item.min;
                    }
                });
            },
            chooseDone(opera) {
                if (this.chooseSku !== "") {
                    if (this.buyNum <= this.chooseSku.stock) {
                        this.opera = opera;
                        this.chooseSku.count = this.buyNum;
                        this.close();
                    } else {
                        this.$toast("库存不足，请重新选择");
                        if (this.chooseSku.min < this.buyNum) {
                            this.buyNum = this.chooseSku.stock;
                        }
                    }
                } else {
                    this.$toast(this.specMsg);
                }
            }
        },
        computed: {
            selectedImg() {
                if (this.chooseSku) {
                    return this.chooseSku.pic;
                }
                if (this.proContent && this.proContent.sku) {
                    return this.proContent.pic;
                }
            },
            selectedStock() {
                if (this.chooseSku) {
                    return this.chooseSku.stock;
                }
                if (this.proContent && this.proContent.sku) {
                    ///无选中sku库存求和
                    return this.proContent.sku.reduce((result, item) => {
                        return result + item.stock;
                    }, 0);
                }
                return 0;
            },
            selectedPrice() {
                let moneyData = {};
                if (this.chooseSku) {
                    moneyData.price = this.chooseSku.price;
                    moneyData.deduction = this.chooseSku.deduction;
                    return moneyData;
                    // return this.chooseSku.price;
                }
                if (this.proContent && this.proContent.sku) {
                    // moneyData.price = this.proContent.price;
                    // moneyData.deduction = this.proContent.deduction;
                    // return moneyData;
                    //无选中sku求价格最低
                    const priceList = this.proContent.sku.map(item => {
                        return item.price;
                    });
                    moneyData.price = Math.min(...priceList);
                    return moneyData;
                }
                return 0;
            }
        },
        watch: {},
        components: {
            MiniSpec,
            NumControl
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~@/assets/main.styl';

    .van-popup {
        border-top-left-radius: main-radius;
        border-top-right-radius: main-radius;
    }

    .spec_body {
        position: relative;
        margin: smallMargin smallMargin;
        overflow-x: hidden;

        .spec_num {
            width: vw(350);
            flex-x();
            position: relative;
            margin-top: smallMargin;
            word-vw(word16, gray3);
        }
    }

    .line1 {
        line();
        position: relative;
        margin: titleMargin 0;
    }

    .spec_top {
        width: vw(355);
        height: vw(100);

        img {
            float: left;
            width: vw(100);
            height: vw(100);
        }

        .text {
            float: left;
            margin-left: middleMargin;
            width: vw(200);
            height: vw(100);
        }

        .close {
            width: vw(14);
            height: vw(14);
            fill: gray3;
            position: absolute;
            right: 0;
        }

        .current {
            word-vw(word14, gray3);
            height: vw(19);
            line-height: vw(19);
            color: main-color;

            .earn {
                margin-left: smallMargin;
            }

            .change {
                color: main-color;
            }
        }

        .stock {
            word-vw(word14, gray9);
            height: vw(19);
            line-height: vw(19);
            margin-top: vw(15);
        }

        .choice {
            word-vw(word14, gray9);
            margin-top: middleMargin;
        }
    }

    .spec_bottom {
        /* margin-top smallMargin */
        display: flex;
        height: vw(50);
        align-items: center;
        justify-content: center;
        background-color: #fff;
        font-size: word16;

        .cart {
            secondary-hollow();
        }

        .buy {
            margin-left: middleMargin;
            secondary-solid();
        }

        .confirm {
            flex: 0 1 auto;
            middle-solid();
            word-vw(word16, gary9);
        }
    }

    .control {
        flex-y(center, flex-end);
        text-align: right;

        .numControl {
            flex-x(flex-end);
        }

        p {
            word-vw(word10, main-color);
            margin-top: vw(5);
        }
    }

    /* .spec_bottom {
        position relative
        margin-top middleMargin
        display flex
        background-color grayF
        width 100%
        height vw(49)
        align-items center
        justify-content center
        box-sizing border-box
        font-size word16
        .cart {
            secondary-hollow()
        }
        .no {
            color gray9
            border-color gray9
        }
        .buy {
            //margin-left middleMargin
            secondary-solid()
        }
    } */
    .title {
        word-vw(word12, gray3);
        margin-left: bigMargin;
        height: vw(16);
        line-height: vw(16);
    }

    .subtitle {
        word-vw(word12, gray9);
        margin-left: bigMargin;
        margin-top: titleMargin;
        height: vw(16);
        line-height: vw(16);
    }
</style>
